<%@ page language="java" import="java.util.*,ms.platform.system.model.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
    
<title>资源列表</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="<%=basePath%>js/bootstrap-3.3.6/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="<%=basePath%>css/style.css" />
<link rel="stylesheet" type="text/css" href="<%=basePath%>css/mydialog.css" />
<link rel="stylesheet" type="text/css" href="<%=basePath%>css/font-awesome.min93e3.css" />
<link rel="stylesheet" type="text/css" href="<%=basePath%>css/bootstrapValidator.css"/>

<script type="text/javascript" src="<%=basePath%>js/validate/jquery-1.10.2.min.js" ></script>
<script type="text/javascript" src="<%=basePath%>js/rem.js" charset="utf-8"></script>
<script type="text/javascript" src="<%=basePath%>js/validate/bootstrapValidator.js"></script>
<script type="text/javascript" src="<%=basePath%>js/validate/zh_CN.js"></script>
<script type="text/javascript" src="<%=basePath%>js/bootstrap-3.3.6/dist/js/bootstrap.min.js" charset="utf-8"></script>
<script type="text/javascript" src="<%=basePath%>js/common/dialog.3.1.min.js"></script>
<script type="text/javascript" src="<%=basePath%>js/validate/contabs.min.js"></script>
<script type="text/javascript">
		$(document).ready(function(){
			var level=0;
			$("h3").each(function() {
				if($(this).attr("level")>level){
					level=$(this).attr("level");
				}
			});
			$(".btnAry").hide();
			$("h3").hide();
			$("h3[level=0]").show();
			$("h3[level=0]").find("i").remove();
			$("h3[level=1]").show();
			$("h3[level="+level+"]").find("i[name='icon']").attr("class","glyphicon glyphicon-minus");
			
			 //1.9新版本
			 $(document).on("mouseover", ".label", function(){
				$(".btnAry").hide();
				$(this).next().toggle();
			});
			 
			$(".label").hover(
			  function () {
			    $(this).addClass("hover");
			  },
			  function () {
			    $(this).removeClass("hover");
			  });
			
			$(document).on("click", "i[name='icon']", function(){
				var classValue=$(this).attr("class");
				var id=$(this).parents("h3").attr("id");
				var path=$(this).parents("h3").attr("path");
				if(classValue.indexOf("minus")>0){
					//点击关闭
					$(this).attr("class","glyphicon glyphicon-plus");
					$("h3[pid="+id+"]").find("i[name='icon']").attr("class","glyphicon glyphicon-plus");
					$("h3[path^='"+path+"']").hide();
				}else{
					//点击展开
					$(this).attr("class","glyphicon glyphicon-minus");
					$("h3[pid="+id+"]").show();
				}
				$("h3[id="+id+"]").show();
				$("h3[level=1]").show();
			});
			
			//跳转到添加资源页面 
			$(document).on("click", "button[name='addResource']", function(){
//				var top=document.documentElement.clientHeight/2-200;
				$(".modal").css("top", 50);
//				$(".modal").css("position","absolute");
				$(".modal-header").find("h4[name='myModalLabel']").html("<span>添加资源</span>");
				var id=$(this).parent().parent().attr("id");
				var childrenLevel = $(this).parent().parent().attr("childrenLevel");
			    $("#myModal").find("input[name='parentId']").val(id);
			    $("#myModal").find("input[name='level']").val(childrenLevel);
			    
			    $("#myModal").find("input[name='id']").val("");
          	  	$("#myModal").find("input[name='name']").val("");
			   	$("#myModal").find("input[name='url']").val("");
			    $("#myModal").find("input[name='type]").val("");
			   	$("#myModal").find("input[name='comment']").val("");
			});
			
			//编辑修改资源 
			$(document).on("click", "button[name='editResource']", function(){
//				var top=document.documentElement.clientHeight/2-200;
				$(".modal").css("top", 50);
//				$(".modal").css("position","absolute");
				$(".modal-header").find("h4[name='myModalLabel']").html("<span>修改资源</span>");
				var id=$(this).parent().parent().attr("id");
				$.ajax({            
	                  type:"post",
	                  url:"<%=path%>/system/resource/toEdit", 
	                  data:"id="+id,     
	                  dataType:"json",
	                  success:function(data) {
	                	  var resource=data.data;
	                	  $("#myModal").find("input[name='id']").val(resource.id);
	                	  $("#myModal").find("input[name='name']").val(resource.name);
	      			   	  $("#myModal").find("input[name='url']").val(resource.url);
	      			      $("#myModal").find("select[name='type']").find("option[value="+resource.type+"]").attr("selected",true);
	      			   	  $("#myModal").find("input[name='comment']").val(resource.comment);
	                  }            
	            });  
			});
			
			//删除资源
			$(document).on("click", "button[name='deleteResource']", function(){
				var id=$(this).parent().parent().attr("id");
				var grayScreen=document.getElementById("gray-screen");
				$.ajax({            
					type:"post",
					url:"<%=path%>/system/resource/deleteResource", 
					data:"id="+id,
					dataType:"json",
					success:function(data) {
						if(data.message != undefined){
							Dialog({
								"msg": '<div class="D_alert">'+data.message+'</div>',
								"title": "提示",
								"showButtons": true,
								"cancelButton": false,
								"onComplete": function() {
								$("body").empty();
									window.location.reload();
								}
							});	
						}else{
		              		  window.location.reload();
		              	  }
					}            
				});  
			});
			
			//禁用|恢复 
			$(document).on("click", "button[name='disabledResource']", function(){
				var id=$(this).parent().parent().attr("id");
				var isUsed=$(this).attr("isUsed");
				var grayScreen=document.getElementById("gray-screen");
	           $.ajax({            
	                  type:"post",
	                  url:"<%=path%>/system/resource/disabledResource",
	                  data:"id="+id+"&isUsed="+isUsed,     
	                  dataType:"json",
	                  success:function(data) {
	                	  if(data.message != undefined){
		                	  Dialog({
			  		                "msg": '<div class="D_alert">'+data.message+'</div>',
			  		                "title": "提示",
			  		                "showButtons": true,
			  		                "cancelButton": false,
			  		                "onComplete": function() {
			  		                 	$("body").empty();
			  		                	window.location.reload();
			  		                }
			  		            });	
	                	  }else{
	                  		  window.location.reload();
	                  	  }
	                  }            
	            });  
			});
			
			$('#defaultForm').bootstrapValidator({
	            message: 'This value is not valid',
	            feedbackIcons: {
	                valid: 'glyphicon glyphicon-ok',
	                invalid: 'glyphicon glyphicon-remove',
	                validating: 'glyphicon glyphicon-refresh'
	            },
	            fields: {
	                name: {
	                    validators: {
	                        notEmpty: {},
	                        stringLength: {min: 1,max: 30},
	                    }
	                },
	                type: {
	                    validators: {
	                        notEmpty: {}
	                    }
	                },
	            }
	        }).on('success.form.bv', function(e) {
	            // Prevent form submission
	            e.preventDefault();

	            // Get the form instance
	            var $form = $(e.target);

	            // Get the BootstrapValidator instance
	            var bv = $form.data('bootstrapValidator');

	            // Use Ajax to submit form data
	            $.post($form.attr('action'), $form.serialize(), function(result) {
	            	$form.find('.alert').html(result.message).show();
	            	window.setTimeout(
            			function(){
            				window.location.reload();
            			}, 1000); 
	            }, 'json');
	        });
		});
</script>
</head>
<body>
	<div id="index-hav2">
		<div class="index-hav-right" id="index-hav-right-clear">
			<div class="row">
				<div class="col-md-9">
					<span id="icon-house"></span> <span id="arrows-left">首页</span> 
					<span id="arrows-left">></span><span>系统管理</span> 
					<span id="arrows-left">></span><span>资源管理</span>
				</div>
				<div class="bank-box">
					<div class="lianlian platform">
						<div class="col-md-12">
							<div style="margin-top: 0.1rem; margin-bottom: 0.1rem;">
								<div class="col-xs-5" id="tree" >
									<h3 pid="0" id="0" level="0" childrenLevel="1" path="">
										<i name='icon' class='glyphicon glyphicon-plus' pid="0"></i> 
										<span class='label labelList' isUsed="0">资源列表</span>
										&nbsp;&nbsp; 
										<span class='btnAry'>
											<button class='btn btn-primary btn-xs' data-toggle='modal' data-target='#myModal' name='addResource'>添加子节点</button>
										</span>
									</h3>
									<c:forEach items="${menuList}" var="menu">
										<h3 pid="${menu.parentId}" id="${menu.id}"
											level="${menu.level}" childrenLevel="${menu.level+1}" path="${menu.path}">
											<i name='icon' class='glyphicon glyphicon-plus' pid="${menu.parentId}"></i>
											<c:if test="${menu.isUsed==1}">
												<span class='label labelList' isUsed="${menu.isUsed}">${menu.name}</span>
												&nbsp;&nbsp;
												<span class='btnAry'>
													<button class='btn btn-info btn-xs' data-toggle='modal' data-target='#myModal' name='editResource'>编辑</button> 
													<c:if test="${menu.isUsed==0}">
														<button class='btn btn-success btn-xs' name='disabledResource' isUsed=1>恢复</button>
													</c:if> 
													<c:if test="${menu.isUsed==1}">
														<button class='btn btn-warning btn-xs' name='disabledResource' isUsed=0>禁用</button>
													</c:if>
													<button class='btn btn-danger btn-xs' name='deleteResource'>删除</button>
													<button class='btn btn-primary btn-xs' data-toggle='modal' data-target='#myModal' name='addResource'>添加子节点</button> 
													<!-- 
													<button class='btn btn-info btn-xs' name='orderResource' order='1'>上移</button>
													<button class='btn btn-info btn-xs' name='orderResource'  order='0'>下移</button> 
													-->
												</span>
											</c:if>
											<c:if test="${menu.isUsed==0}">
												<span class='label labelList' isUsed="${menu.isUsed}">${menu.name}</span>
											&nbsp;&nbsp;
											<span class='btnAry'>
												<button class='btn btn-success btn-xs' name='disabledResource' isUsed=1>恢复</button></span>
											</c:if>
										</h3>
										<c:if test="${menu.children.size()>0}">
											<c:forEach items="${menu.children}" var="m">
												<h3 pid="${m.parentId}" id="${m.id}" level="${m.level}" childrenLevel="${m.level+1}" path="${m.path}">
													&nbsp;&nbsp; 
													<i name='icon' class='glyphicon glyphicon-plus' pid="${m.parentId}"></i>
													<c:if test="${m.isUsed==1}">
														<span class='label labelList' isUsed="${m.isUsed}">${m.name}</span>
														&nbsp;&nbsp;
														<span class='btnAry'>
															<button class='btn btn-info btn-xs' data-toggle='modal' data-target='#myModal' name='editResource'>编辑</button> 
															<c:if test="${m.isUsed==0}">
																<button class='btn btn-success btn-xs' name='disabledResource' isUsed=1>恢复</button>
															</c:if> 
															<c:if test="${m.isUsed==1}">
																<button class='btn btn-warning btn-xs' name='disabledResource' isUsed=0>禁用</button>
															</c:if>
															<button class='btn btn-danger btn-xs'
																name='deleteResource'>删除</button>
															<button class='btn btn-primary btn-xs' data-toggle='modal' data-target='#myModal' name='addResource'>添加子节点</button>
															<!-- <button class='btn btn-info btn-xs' name='orderResource' order='1'>上移</button>
													<button class='btn btn-info btn-xs' name='orderResource'  order='0'>下移</button> -->
														</span>
													</c:if>
													<c:if test="${m.isUsed==0}">
														<span class='label labelList' isUsed="${m.isUsed}">${m.name}</span>
														&nbsp;&nbsp;
														<span class='btnAry'>
															<button class='btn btn-success btn-xs' name='disabledResource' isUsed=1>恢复</button>
														</span>
													</c:if>
												</h3>

												<c:if test="${m.children.size()>0}">
													<c:forEach items="${m.children}" var="mm">
														<h3 pid="${mm.parentId}" id="${mm.id}" level="${mm.level}"
															childrenLevel="${mm.level+1}" path="${mm.path}">
															&nbsp;&nbsp;&nbsp;&nbsp; <i name='icon'
																class='glyphicon glyphicon-plus' pid="${mm.parentId}"></i>
															<c:if test="${mm.isUsed==1}">
																<span class='label labelList' isUsed="${mm.isUsed}">${mm.name}</span>
													&nbsp;&nbsp;
													<span class='btnAry'>
																	<button class='btn btn-info btn-xs'
																		data-toggle='modal' data-target='#myModal'
																		name='editResource'>编辑</button> <c:if
																		test="${mm.isUsed==0}">
																		<button class='btn btn-success btn-xs'
																			name='disabledResource' isUsed=1>恢复</button>
																	</c:if> <c:if test="${mm.isUsed==1}">
																		<button class='btn btn-warning btn-xs'
																			name='disabledResource' isUsed=0>禁用</button>
																	</c:if>
																	<button class='btn btn-danger btn-xs'
																		name='deleteResource'>删除</button> <!-- <button class='btn btn-info btn-xs' name='orderResource' order='1'>上移</button>
														<button class='btn btn-info btn-xs' name='orderResource'  order='0'>下移</button> -->
																</span>
															</c:if>
															<c:if test="${mm.isUsed==0}">
																<span class='label labelList' isUsed="${mm.isUsed}">${mm.name}</span>
																&nbsp;&nbsp;
																<span class='btnAry'>
																	<button class='btn btn-success btn-xs' name='disabledResource' isUsed=1>恢复</button>
																</span>
															</c:if>
														</h3>
													</c:forEach>
												</c:if>
											</c:forEach>
										</c:if>
									</c:forEach>
								</div>
							</div>
							
							<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
								<div class="modal-dialog">
									<div class="modal-content">
										<div class="modal-header">
											<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
											<h4 class="modal-title" id="myModalLabel" name="myModalLabel"></h4>
										</div>
										<div class="modal-body">
											<form id="defaultForm" class="form-horizontal" method="post" action="<%=path%>/system/resource/save">
												<div class="alert alert-success" style="display: none;"></div>
												<input type="hidden" name="id"> <input type="hidden" name="parentId"> 
												<input type="hidden" name="level">
												<input type="hidden" name="path"> 
												<input type="hidden" name="isUsed" value="1">
												<div class="form-group">
													<label class="col-sm-2 control-label">名称:</label>
													<div class="col-sm-6">
														<input type="text" name="name" class="form-control">
													</div>
												</div>
												<div class="form-group">
													<label class="col-sm-2 control-label">url:</label>
													<div class="col-sm-6">
														<input type="text" name="url" class="form-control">
													</div>
												</div>
												<div class="form-group">
													<label class="col-sm-2 control-label">类型:</label>
													<div class="col-sm-6">
														<select class="form-control input-sm mb15" name="type">
															<option value="">-- 请选择 --</option>
															<option value="1">菜单</option>
															<option value="2">按钮</option>
														</select>
													</div>
												</div>
												<div class="form-group">
												<input name="icon" id="icon" type="hidden" >
												<label class="col-sm-2 control-label">图标:</label>
												<div class="col-sm-6">
												<span class="model-ico"></span>
												 <input class="modelIco" type="button" value="请选择图标" />
												</div>
												</div>
												<div class="form-group">
													<label class="col-sm-2 control-label">备注:</label>
													<div class="col-sm-6">
														<input type="text" name="comment" class="form-control">
													</div>
												</div>
												<div class="form-group">
													<div class="modal-footer">
														<button type="submit" class="btn btn-primary">保存</button>
														<button type="button" class="btnClose btn btn-default" data-dismiss="modal">关闭</button>
													</div>	
												</div>
											</form>
										</div>
									</div>
								</div>
								<!-- 图标 start -->
								<div class="modal fade" id="showIco">
								<div class="modal-dialog">
								     <div class="modal-header">
										 <button type="button" class="close closeBtn">&times;</button>
										 <p style="width:500px;"><span class="modal-title" style="font-size:20px;">图标</span> <button type="button" style="float:right;" id="shut" class="btn btn-primary">关闭</button></p>
									 </div>
									<ul>
									    <li class="col-md-4"><i class="fa fa-edit"></i>edit</li>
										<li class="col-md-4"><i class="fa fa-list-alt"></i>list-alt</li>
										<li class="col-md-4"><i class="fa fa-bar-chart"></i>bar-chart</li>
										<li class="col-md-4"><i class="fa fa-cog"></i>cog</li>
										<li class="col-md-4"><i class="fa fa-check-square-o"></i>check-square-o</li>
										<li class="col-md-4"><i class="fa fa-th-list"></i>th-list</li>
										<li class="col-md-4"><i class="fa fa-flag"></i>flag</li>
										<li class="col-md-4"><i class="fa fa-gift"></i>gift</li>
										<li class="col-md-4"><i class="fa fa-clock-o"></i>clock-o</li>
										<li class="col-md-4"><i class="fa fa fa-users"></i>users</li>
										<li class="col-md-4"><i class="fa fa-balance-scale"></i>balance-scale</li>
										<li class="col-md-4"><i class="fa fa-rmb"></i>rmb</li>
										<li class="col-md-4"><i class="fa fa-link"></i>link</li>
										<li class="col-md-4"><i class="fa fa-angle-double-right"></i>angle-double-right</li>
										<li class="col-md-4"><i class="fa fa-glass"></i>glass</li>
										<li class="col-md-4"><i class="fa fa-calculator"></i>calculator</li>
										<li class="col-md-4"><i class="fa fa-legal"></i>legal</li>
									</ul>
									
									</div>
								</div>
							<!-- 图标 end -->
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div id="gray-screen"></div>
	
	<script>
	$(function(){
		$(".modelIco").click(function(){
			$("#showIco").show();
		});
		$("#shut").click(function(){
				$("#showIco").hide();
		})
		
		$(".closeBtn").click(function(){
			$("#showIco").hide();
		});
		$(".btnClose").click(function(){
			$("#showIco").hide();
		});
		$("#showIco ul li").on('click',function(){
			var This=$(this).html();
			$(".model-ico").html("").append(This);
			var arr=This.split("i\>");
			document.getElementById("icon").value=arr[0]+"i>";
			$("#showIco").hide();
			
		})
		
	})
	</script>
</body>
</html>
